<template>
  <ListTab v-model="activeId" :show-header="!showMobilePage" :tabs="tabList" :class="{'mobile-dept-tab': showMobilePage}" is-table/>
</template>

<script>
import ListTab from '@/components/ListTab';
import { DEPT_TAB_STATUS } from '@/utils/const/setting';
import { mapState } from 'vuex';
export default {
  name: 'DeptTab',
  components: {
    ListTab
  },
  props: {
    currActive: {
      type: Number,
      default: DEPT_TAB_STATUS.NORMAL
    }
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    tabList() {
      return [
        { id: DEPT_TAB_STATUS.NORMAL, name: '部门' },
        { id: DEPT_TAB_STATUS.DELETED, name: '已删除' }
      ];
    },
    activeId: {
      get() {
        return this.currActive;
      },
      set(id) {
        this.handleTabClick(id);
      }
    }
  },
  methods: {
    handleTabClick(id) {
      switch (id) {
        case DEPT_TAB_STATUS.NORMAL:
          this.$router.push({ name: 'departmentManage' });
          break;
        case DEPT_TAB_STATUS.DELETED:
          this.$router.push({ name: 'deletedDept' });
          break;
      }
    }
  }
};
</script>

<style scoped lang="scss">
  .mobile-dept-tab {
    padding-left: 0 !important;
  }
</style>
